<template>
  <el-row>
    <el-col :span="24" class="blog-container">
      <!--左侧菜单栏部分-->
      <el-col :span="6">
        <!--博文页面右侧组件-->
        <MyUserCenterMenuBar ref="menu"></MyUserCenterMenuBar>
      </el-col>
      <!--右侧视图部分-->
      <el-col :span="18">
        <div class="usercenter-right">
          <!--搜索结果列表组件-->
          <el-form :inline="true" :model="currentLoginUser" class="demo-form-inline userform-right">
            <el-form-item label="头像">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="currentAvatarUrl"
                  :fit="fit" :error="reloadAvatar"></el-image>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="currentLoginUser" class="demo-form-inline userform-right">
            <el-form-item label="">
              <el-collapse accordion>
                <el-collapse-item title="更换头像" name="1">
                  <div class="avatar-container">

                    <el-image v-for="(logo,index) in avatarList" :key="index"
                              style="width: 100px; height: 100px;cursor:pointer"
                              :src="logo"
                              :fit="fit" @click="changeAvatar(index)"></el-image>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="currentLoginUser" class="demo-form-inline userform-right">
            <el-form-item label="用户名">
              <el-input v-model="currentLoginUser.username" readonly placeholder="用户名" size="mini"></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="currentLoginUser" class="demo-form-inline userform-right">
            <el-form-item label="手机">
              <el-input v-model="currentLoginUser.mobile" readonly placeholder="手机" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="currentLoginUser.email" readonly placeholder="电子邮箱" size="mini"></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="currentLoginUser" class="demo-form-inline userform-right">
            <el-form-item label="性别">
              <el-radio v-model="currentLoginUser.gender" label="男" size="mini">男</el-radio>
              <el-radio v-model="currentLoginUser.gender" label="女" size="mini">女</el-radio>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="currentLoginUser" class="demo-form-inline userform-right">
            <el-form-item label="出生日期">
              <el-date-picker
                  size="mini"
                  v-model="currentLoginUser.birthday"
                  align="right"
                  type="date"
                  format="yyyy-MM-dd"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="currentLoginUser" class="demo-form-inline userform-right">
            <el-form-item label="省/市/区">
              <v-distpicker :province="currentLoginUser.province" :city="currentLoginUser.city"
                            :area="currentLoginUser.zone" @province="changeProvince" @city="changeCity"
                            @area="changeArea"></v-distpicker>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="currentLoginUser" class="demo-form-inline userform-right">
            <el-form-item label="身份证号码">
              <el-input v-model="currentLoginUser.idCard" placeholder="身份证号码" maxlength="18"
                        size="mini"></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="currentLoginUser" class="demo-form-inline userform-right">
            <div style="text-align: center">
              <el-button round @click="updateUserProfile">更新资料</el-button>
            </div>
          </el-form>
        </div>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import MyUserCenterMenuBar from "@/components/MyUserCenterMenuBar";
import VDistpicker from 'v-distpicker';
import {update} from "@/api/users/users";
const outils = require('outils');
export default {

  // 完整引入outils工具类

  name: "MyUserCenterContainer",
  components: {
    MyUserCenterMenuBar,
    VDistpicker
  },
  data() {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      currentAvatarUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      firstLevelDistrictList: [],
      secondLevelDistrictList: [],
      thirdLevelDistrictList: [],
      /*
      province: '陕西省',
      city: '西安市',
      zone: '高陵区',*/
      avatarList: [
        "https://img.simoniu.com/vue-color-avatar01.png",
        "https://img.simoniu.com/vue-color-avatar02.png",
        "https://img.simoniu.com/vue-color-avatar03.png",
        "https://img.simoniu.com/vue-color-avatar04.png",
        "https://img.simoniu.com/vue-color-avatar05.png",
        "https://img.simoniu.com/vue-color-avatar06.png",
        "https://img.simoniu.com/vue-color-avatar07.png",
        "https://img.simoniu.com/vue-color-avatar08.png",
        "https://img.simoniu.com/vue-color-avatar09.png",
        "https://img.simoniu.com/vue-color-avatar10.png",
        "https://img.simoniu.com/vue-color-avatar11.png",
        "https://img.simoniu.com/vue-color-avatar12.png",
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      /*
      currentLoginUser: {
        gender: '男',
        avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }*/

      currentLoginUser: this.$store.state.loginSuccessUser
    }
  }
  ,
  mounted() {

    console.log(this.currentLoginUser);
    this.currentAvatarUrl = this.currentLoginUser.avatar;

  }
  ,
  methods: {

    changeProvince(data) {
      console.log(data);
      this.currentLoginUser.province = data.value;
      this.currentLoginUser.provinceCode = data.code;
    },

    changeCity(data) {
      console.log(data);
      this.currentLoginUser.city = data.value;
      this.currentLoginUser.cityCode = data.code;
    },
    changeArea(data) {
      console.log(data);
      this.currentLoginUser.zone = data.value;
      this.currentLoginUser.zoneCode = data.code;
    },

    changeAvatar(index) {
      this.currentAvatarUrl = this.avatarList[index];
      this.currentLoginUser.avatar = this.avatarList[index];
    },

    initFirstLevelDistrictList() {

    },

    initSecondLevelDistrictList(item) {

    },
    initThirdLevelDistrictList(item) {

    },
    updateUserProfile(){
      console.log("-------------要更新的用户资料如下---------------")
      console.log(this.currentLoginUser);
      //删除password属性，因为更新用户的时候，并不会更新密码
      delete this.currentLoginUser.password;

      //检查用户身份证的有效性
      if(!outils.isIdCard(this.currentLoginUser.idCard)){
         this.$message.error("身份证号码格式不正确！");
         return;
      }

      update(this.currentLoginUser).then(resp=>{
        console.log(resp);
        if(resp.data.code === 200){
          this.$message.success(resp.data.msg);
          //更新localStorage
          //更新成功之后，version版本号必须加1
          this.currentLoginUser.version++;
          localStorage.setItem("currentLoginUserInfo",JSON.stringify(this.currentLoginUser));
          //更新state
          this.$store.state.loginSuccessUser = this.currentLoginUser;

        }else{
          this.$message.error(resp.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>
.usercenter-right {
  width: 90%;
  height: 98%;
  margin: 20px 10px 0px 10px;
  padding: 10px 0px 10px 0px;
  background: #FFF;
}

.userform-right {
  margin: 0px 0px 0px 20px;
  background: #FFF;
}

.avatar-container {
  width: 80%;
  height: 220px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>